<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <script src="../lib/ajax.js"></script>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>

    <style>
        .box1 {
            width: 60%;
            border: 1px solid darkorchid;
            border-radius: 10px;
            padding: 20px;
        }

        .router-link-exact-active,
        .router-link-active {
            color: deeppink;
            border: 1px solid deepskyblue;
            padding: 5px;
            border-radius: 5px;
            background: darkslateblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title }}</h2>
        <myhead></myhead>
        <!-- 5.路由出口  申明加载路由的地址 -->
        <router-view class="box1"></router-view>

        <!-- 6.路由导航  声明式导航 a -->
        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'list'}">列表</router-link>
        <router-link :to="{name:'news'}">新闻</router-link>
        <router-link :to="{name:'mine',params:{uid:2110},query:{address:'wuhan'}}">个人中心</router-link>
    </div>

    <template id="head">
        <header>
            WH2110-DAYDAYUP
        </header>
    </template>

    <template id="home">
        <div>
            <h2> Home - Home - hOme </h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h2> news - news - 新闻 </h2>
            <button @click="goback">点击返回</button>
            <button @click="gotopage">进入 小花 的主页 mine </button>
        </div>
    </template>
    <template id="list">
        <div>
            <h2> list - list- 列表 </h2>
            <div>
                <p @click="gotodetail(l,i)" v-for="(l,i) in songs" :key="i">
                    {{l.name}}
                </p>
                <h2>2222</h2>
            </div>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2> mine - mine- 我的信息 </h2>
            <p>uid --- {{$route.params.uid }}</p>
            <p>address --- {{$route.query.address }}</p>

        </div>
    </template>

    <template id="detail">
        <div>
            <h2> detail - detail- 歌曲详情 <button @click="$router.go(-1)">返回</button></h2>
            <h2>标题 : {{$route.query.name }}</h2>
            <img :src="$route.query.coverImgUrl" alt="">
        </div>
    </template>
</body>
<script>
    // 0.如果使用模块机制编程，导入Vue和VueRouter，要调用Vue.use（VueRouter）
    Vue.component("myhead", {
        template: "#head"
    })
    // 1.定义（路由）组件
    var Home = {
        template: "#home"
    }
    var List = {
        template: "#list",
        data() {
            return {
                songs: []
            }
        },
        methods: {
            gotodetail(item, index) {
                this.$router.push({ name: 'detail', query: { ...item } })
            }
        },
        mounted() {
            ajax({
                type: "get",
                url: "http://47.104.209.44:3333/top/playlist/highquality",
                dataType: "json",
                success: res => {
                    console.log(res);
                    this.songs = res.playlists
                }
            })
        }

    }
    var News = {
        template: "#news",
        methods: {
            goback() {
                // history.go(-1)
                // history.back()
                // this.$router.go(-1)
                router.back()
            },
            gotopage() {
                // this.$router == router
                this.$router.push("/mine/2107?address=长沙")
                // this.$router.push({path:'/mine/2101',query:{address:'杭州'},params:{uid:2008}})
                // this.$router.push({ name: 'mine', query: { address: '杭州' }, params: { uid: 2008 } })
            }
        }
    }
    var Mine = {
        template: "#mine"
    }

    var Detail = {
        template: "#detail"
    }
    // 2.定义路由   （定义路由里面组件和地址路径的映射关系）
    const routes = [
        {
            path: "",
            redirect: { name: "home" }
        },
        {
            path: "/home",
            name: "home",
            component: Home
        },
        {
            path: "/news",
            name: "news",
            component: News
        },
        {
            path: "/list",
            name: "list",
            component: List
        },
        {
            path: "/detail",
            name: 'detail',
            component: Detail
        },
        {
            path: "/mine/:uid?",
            name: "mine",
            component: Mine
        },
        {
            path: "/404",
            name: "notfound",
            component: {
                template: "<h1>404 - 404 - NotFound </h1>"
            }
        },
        {
            path: "*",
            redirect: "/home"
        }
    ]
    // 3.创建路由对象

    const router = new VueRouter({
        routes,
        base: "",
        mode: "hash",
        scrollBehavior: () => {   // 监听路由页面的滚动行为 

        }
    })

    // base 应用的基路径 一般不用设置 采用的相对路径  上线的时候才需要单独去设置路径
    // mode 路由模式
    // hash url地址的 hash模式 兼容性强 带#号 可以刷新浏览器 但是地址比较长 不简洁
    // history 不带#号 不能刷新浏览器（需要服务器重定向404） 比较简洁优雅 依赖 HTML5 History API 和服务器配置7 
    // 挂载到根实例
    const vm = new Vue({
        router,
        el: "#app",
        data: {
            title: "Vue 路由的初步学习 "
        },
        watch: {
            '$route': function (to, from) {
                console.log(to)   // 即将进入的路由
                console.log(from) // 即将离开的路由 
            }
        },
        mounted() {
            console.log(this.$router)  // router 路由对象  负责路由切换 重定向
            console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
        }


    })
</script>

<!-- 

    嵌套路由
    有都是层嵌套就写多少个 children 每一层嵌套都必须对应一个  route-view

    路由跳转

    1.声明式  html跳转  router-link     to
    2.编程式  javasript 跳转  函数代码跳转  this.$router    router
    // 字符串
    router.push('home')
    //  对象
    router.push({path:'home'})
    // 命名的路由
    router.push({name:'user',params:{userId:'123'}})
    // 带查询参数,变成/register?plan=private
    rputer.push({path:'register',query:{plan:'private'}})

    router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换
    $route == this.$route   路由对象属性 （params query name）

    router.go(1)
    router.goforward();     前进
    router.go(-1)           后退
    router.back()   
 -->

</html>